<template>
  <div id="info_bannertop">
    <!-- 轮播图 -->
    <div class="container clearflx" style="position:relative;">
      <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide v-for="(slide, index) in swiperSlides" :key="index">
          <img :src="slide" alt style="width:100%;display:block;" />
        </swiper-slide>
      </swiper>
      <div class="swiper-button-next swiper-n" ref="mySwiper_next"></div>
      <div class="swiper-button-prev swiper-p" ref="mySwiper_prev"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      swiperOption: {
        autoplay: true,
        // loop: true,
        slidesPerGroup: 5,
        slidesPerView: "auto",
        spaceBetween: 16,
        navigation: {
          nextEl: ".swiper-n",
          prevEl: ".swiper-p"
        }
      },
      swiperSlides: [
        "../../assets/info/Carousel_01.jpg",
        "../../assets/info/Carousel_02.jpg",
        "../../assets/info/Carousel_03.jpg",
        "../../assets/info/Carousel_04.jpg",
        "../../assets/info/Carousel_05.jpg",
        "../../assets/info/Carousel_01.jpg",
        "../../assets/info/Carousel_02.jpg",
        "../../assets/info/Carousel_03.jpg",
        "../../assets/info/Carousel_04.jpg",
        "../../assets/info/Carousel_05.jpg"
      ]
    };
  }
};
</script>
<style lang="scss" scoped>
.swiper-container {
  width: 1100px;
  height: 193px;
  margin: 0 auto;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  width: 168px;
}

.swiper-slide:nth-child(5n) {
  width: 358px;
}
.swiper-button-prev {
  left: 0;
  background-image: url("../../assets/banner_prev.png");
}
.swiper-button-next {
  right: 0;
  background-image: url("../../assets/banner_next.png");
}
</style>